import { Modal, Space, Form, Row, Col } from 'antd'
import React, { useEffect, useMemo, useState } from 'react'
import style from './Person.module.less'
import Text from '@components/Text'

const { Item, useForm } = Form

function Main ({ value }) {
  const [formRef] = useForm()
  const [current, setCurrent] = useState(null)
  const list = useMemo(() => {
    if (value && value instanceof Array) {
      return value
    }
    return []
  }, [value])
  useEffect(() => {
    if (current && formRef) {
      formRef.setFieldsValue(current)
    }
  }, [current, formRef])
  return (
    <div>
      <div className={style.persons}>
        <Space split='、' wrap>
          {list.map(li => (<a key={li.id} onClick={() => { setCurrent(li) }}>{li.name}</a>))}
        </Space>
        {
          list.length === 0 && '无'
        }
      </div>
      <Modal width='800px' title='人员详情' open={current !== null} onCancel={() => setCurrent(null)} footer={null} forceRender>
        <Form form={formRef} labelCol={{ flex: '128px' }} className={style.form}>
          <Row gutter={24}>
            <Col span={12}>
              <Item label='届数' name='term'>
                <Text />
              </Item>
              <Item label='姓名' name='name' rules={[{ required: true, message: '姓名不能为空' }]}>
                <Text />
              </Item>
              <Item label='国家地区' name='country'>
                <Text />
              </Item>
              <Item noStyle shouldUpdate={(p, c) => p.country !== c.country}>
                {({ getFieldValue }) => {
                  const c = getFieldValue('country')
                  if (c !== '中国') {
                    return <span />
                  }
                  return (
                    <>
                      <Item label='省市' name='provinceCity'>
                        <Text format={v => typeof v === 'object' && v.length > 0 ? v.join(' ') : '无'} />
                      </Item>
                      <Item label='民族' name='nation'>
                        <Text />
                      </Item>
                      <Item label='政治面貌' name='political'>
                        <Text />
                      </Item>
                    </>
                  )
                }}
              </Item>
              <Item name='address' label='地址'>
                <Text />
              </Item>
              <Item name='structure' label='所在单位'>
                <Text />
              </Item>
            </Col>
            <Col span={12}>
              <Item name='structure_post' label='单位职务'>
                <Text />
              </Item>
              <Item label='职业分类' name='occupation'>
                <Text />
              </Item>
              <Item label='学历' name='educational'>
                <Text />
              </Item>
              <Item label='性别' name='gender'>
                <Text />
              </Item>
              <Item label='是否擅长涉外案件' name='foreign_case_in'>
                <Text format={v => v === 1 ? '是' : '否'} />
              </Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  )
}

export default Main
